<template>
  <div>
    <my-tabs :tab-list="tabList"></my-tabs>
    <div class="correction-header">
      <div
        class="item"
        :class="{ active: type === item.key }"
        v-for="item in navList"
        :key="item.key"
        @click="handleNavChange(item.key)"
      >
        {{ item.title }}
      </div>
    </div>
    <div>
      <el-table :data="list" size="mini" :key="type">
        <el-table-column prop="title"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            {{ `${scope.row.user_count}人参考` }}
          </template>
        </el-table-column>
        <el-table-column width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              icon="el-icon-document"
              v-if="type === 'uncorrected'"
              @click="handleMarking(scope.row.id, 1)"
              >批阅</el-button
            >
            <el-button type="text" size="small" v-else @click="handleMarking(scope.row.id, 2)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EduPagination @handleCurrentChange="handleCurrentChange" align="right"></EduPagination>
  </div>
</template>

<script>
import MyTabs from '../../../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          title: '考试'
        }
      ],
      list: [],
      type: 'uncorrected',
      navList: [
        {
          title: '待批阅',
          key: 'uncorrected'
        },
        {
          title: '已批阅',
          key: 'corrected'
        }
      ]
    }
  },
  created() {
    this.getPaperList(this.type)
  },
  methods: {
    getPaperList(type) {
      this.$api.getExamPaperMarking(
        type,
        {
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getPaperList(this.type)
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.list = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 20,
        total: data.total
      })
    },
    handleNavChange(key) {
      if (this.type !== key) {
        this.type = key
        this.getPaperList(key)
      }
    },
    handleMarking(id, status) {
      this.$router.push({
        path: '/my/classes/correcting/exam/details',
        query: {
          id: id,
          status: status
        }
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.correction-header {
  display: flex;
  .item {
    margin-right: 40px;
    font-size: 14px;
    font-weight: 400;
    color: $text-color-secondary;
    cursor: pointer;
    &:hover,
    &.active {
      @include edu-color-auxiliary;
    }
  }
}
</style>
